<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="http://127.0.0.1:1036/pages/assets/Logo-head.png" rel="shortcut icon" type="image/x-icon">

    <title>Turtlebot3_blockly - an intuitive way to program TurtleBots</title>

    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Include Blocky -->
    <script src="../blockly/blockly_compressed.js"></script>
    <script src="../blockly/blocks_compressed.js"></script>
    <script src="../blockly/javascript_compressed.js"></script>
    <script src="../blockly/python_compressed.js"></script>
    <script src="../blockly/php_compressed.js"></script>
    <script src="../blockly/msg/js/en.js"></script>

    <!-- Ace editor -->
    <script src="../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

    <!-- Ubuntu fonts -->
    <!-- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin"> -->
    <link rel="stylesheet" type="text/css" href="assets/css/ubuntu.css">
    <style>body { font-family: Ubuntu, sans-serif; }</style>


</head>

<body onload="restorelocal()">

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../index.html">turtlebot3_blockly</a>
                <a class="" style="vertical-align: bottom;" href="http://www.ros.org">powered by ROS</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">

                    <ul style="padding-top:10px;">
                      <img style="width:30px;" src="http://127.0.0.1:1036/pages/assets/logo_dabit.png"/>
                      <a href="https://dabit.industries/">Dabit Industries</a>
                    </ul>


<!--                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                    </a>
 -->


<!--                     <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
 -->
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">

<!--                         <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </li> -->

                       <!--  <li>
                            <a href="blockly.html"><i class="active fa fa-cubes fa-fw"></i> Blockly</a>
                        </li> -->

                        <li>
                            <a id="builder" href="#"><i class="fa fa-cubes fa-fw"></i> Builder<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a id="launch_button" name="launch_button" href="#" onclick="ExecutionLogicModule.launch_code($('input[name=group_py]:checked').val());">Launch</a>
                                </li>
                                <li>
                                    <a id="end_button" name="end_button" href="#" onclick='ExecutionLogicModule.end_execution();' style="display:none;">End execution</a>
                                </li>
                                <li>
                                    <a id="refresh_button" name="refresh_button" href="blockly.html" style="display:none;">Refresh</a>
                                </li>
                                <li>
                                    <a id="load_from_file_button" name="load_from_file_button" href="#" onclick='ExecutionLogicModule.load_from_file();'>Load From File</a>
                                </li>
                                <li>
                                    <a id="save_to_file_button" name="save_to_file_button" href="#" onclick='ExecutionLogicModule.save_to_file();'>Save To File</a>
                                </li>
                                <li>
                                    <a id="clean_ws_button" name="clean_ws_button" href="#" onclick='ExecutionLogicModule.clean_ws();'>Clean workspace</a>
                                </li>
                                <li>
                                    <div id="pythondiv" style="color:#75A8D3; text-align:center" >
                                        <span>Python:</span>
                                        <input id="python3" type="radio" value="3" name="group_py" checked />3
                                        <input id="python2" type="radio" value="2" name="group_py" />2
                                    </div>
                                </li>
<!--                                 <li>
                                    <a href="#" onclick="localstorage();">Save</a>
                                </li>
                                <li>
                                    <a href="#" class="">Saved projects<span class="fa arrow"></span></a>

                                    <ul class="nav nav-third-level">
                                      <li><a href="#">Test1</a></li>
                                      <li><a href="#">Test2</a></li>
                                    </ul>
                                </li>
 --><!--                                 <li>
                                    <a href="#" onclick="tojavascript()">Javascript</a>
                                </li>

 -->
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>

                        <li>
                            <a href="graph.html"><i class="fa fa-sitemap fa-fw"></i> Graph</a>
                        </li>

                        <li>
                            <a id="manual_mode_button" name="manual_mode_button" href="#"> Manual control<span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a id="control_spider_button" name="control_spider_button" href="#" onclick="ExecutionLogicModule.manual_control('spider');">Control Spider</a>
                                </li>
                                <li>
                                    <a id="control_rover_button" name="control_rover_button" href="#" onclick="ExecutionLogicModule.manual_control('rover');">Control Rover</a>
                                </li>
                                <li>
                                    <a id="stop_control_button" name="stop_control_button" href="#" onclick="ExecutionLogicModule.manual_control('stop');" style="display:none;">Stop Control</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <!-- Page Content -->
        <div id="page-wrapper">
          <div class="">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs">
                  <li class="active"><a href="#home" data-toggle="tab" onclick="show_blockly();">Blocks</a>
                  </li>
                  <li><a href="#profile" data-toggle="tab" onclick="hide_blockly();">Python code</a>
                  </li>
              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                  <div class="tab-pane fade in active" id="home">
                    <div id="blocklyArea" style="height:100vh;"></div>
                  </div>
                  <div class="tab-pane fade" id="profile">
                      <div id="editor" style="width:100%; height:100vh;">

                        function foo(items) {
                          var x = "All this is syntax highlighted";
                          return x;
                      }
                      </div>
<!--
                      <script>
                          var editor = ace.edit("editor");
                          editor.setTheme("ace/theme/monokai");
                          editor.getSession().setMode("ace/mode/javascript");
                      </script>
 -->

<!--                   <textarea id="profile_text" style="width:100%; height:100px;">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                      </textarea> -->
                  </div>
              </div>
          </div>
          <!-- <div id="blocklyArea" style="height:100vh;"></div> -->
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->

    <div id="blocklyDiv" style="position: absolute"></div>

    <xml id="toolbox" style="display: none">
    <category id="catLogic" name="Logic">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
      <block type="logic_null"></block>
      <block type="logic_ternary"></block>
    </category>
    <category id="catLoops" name="Loops">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
        <value name="FROM">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
        <value name="BY">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
      </block>
      <block type="controls_forEach"></block>
      <block type="for_time"></block>
      <block type="controls_flow_statements"></block>
    </category>
    <category id="catMath" name="Math">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
      <block type="math_trig"></block>
      <block type="math_constant"></block>
      <block type="math_number_property"></block>
      <block type="math_change">
        <value name="DELTA">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
      </block>
      <block type="math_round"></block>
      <block type="math_on_list"></block>
      <block type="math_modulo"></block>
      <block type="math_constrain">
        <value name="LOW">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="HIGH">
          <block type="math_number">
            <field name="NUM">100</field>
          </block>
        </value>
      </block>
      <block type="math_random_int">
        <value name="FROM">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <field name="NUM">100</field>
          </block>
        </value>
      </block>
      <block type="math_random_float"></block>
    </category>
    <category id="catLists" name="Lists">
      <block type="lists_create_with">
        <mutation items="0"></mutation>
      </block>
      <block type="lists_create_with"></block>
      <block type="lists_repeat">
        <value name="NUM">
          <block type="math_number">
            <field name="NUM">5</field>
          </block>
        </value>
      </block>
      <block type="lists_length"></block>
      <block type="lists_isEmpty"></block>
      <block type="lists_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR" class="listVar">...</field>
          </block>
        </value>
      </block>
      <block type="lists_getIndex">
        <value name="VALUE">
          <block type="variables_get">
            <field name="VAR" class="listVar">...</field>
          </block>
        </value>
      </block>
      <block type="lists_setIndex">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR" class="listVar">...</field>
          </block>
        </value>
      </block>
      <block type="lists_getSublist">
        <value name="LIST">
          <block type="variables_get">
            <field name="VAR" class="listVar">...</field>
          </block>
        </value>
      </block>
      <block type="lists_split">
        <value name="DELIM">
          <block type="text">
            <field name="TEXT">,</field>
          </block>
        </value>
      </block>
    </category>
    <category id="catVariables" custom="VARIABLE" name="Variables"></category>
    <category id="catFunctions" custom="PROCEDURE" name="Functions"></category>
    <category id="code" name="Code">
          <block type="run_code"></block>
    </category>
    <category id="control" name="Control">
          <block type="wait"></block>
    </category>
    <sep></sep>
    <category id="turtlebot3" name="Dabit-Turtlebot3" colour="50">
          <block type="circle_mode"></block>
          <block type="move_forward"></block>
          <block type="move_backward"></block>
          <block type="turn_left"></block>
          <block type="turn_right"></block>
          <block type="turn_degrees"></block>
          <block type="stop"></block>
    </category>    


    </xml>


    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

    <!-- Code execution logic -->
    <script src="./js/execution_logic.js"></script>

<!-- ACE editor configuration -->
<script type="text/javascript">
  document.getElementById('editor').style.fontSize='16px';
</script>

<script>
  var blocklyArea = document.getElementById('blocklyArea');
  var blocklyDiv = document.getElementById('blocklyDiv');
  var workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox'),
       scrollbars: true,
       rtl: false,
       zoom:
           {enabled: true,
            controls: true,
            wheel: true,
            maxScale: 4,
            minScale: .25,
            scaleSpeed: 1.1
           },
       grid:
           {spacing: 25,
            length: 3,
            colour: '#ccc',
            snap: false},
       trashcan: true});

  var onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  var element = blocklyArea;
  var x = 0;
  var y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight  + 'px';
  // blocklyDiv.style.height = blocklyArea.offsetHeight - 51 - 42 + 171 + 'px';
  };
  window.addEventListener('resize', onresize, false);
  onresize();
</script>

<script>
  function tojavascript(){
      Blockly.JavaScript.addReservedWords('code');
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      try {
        //eval(code);
        alert(code);
      } catch (e) {
        alert(e);
      }
  };

  function tophp(){
      Blockly.JavaScript.addReservedWords('code');
      var code = Blockly.PHP.workspaceToCode(workspace);
      try {
        //eval(code);
        alert(code);
      } catch (e) {
        alert(e);
      }
  };

  function topython(){
      Blockly.Python.addReservedWords('code');
      var code = Blockly.Python.workspaceToCode(workspace);
      try {
        //eval(code);
        alert(code);
      } catch (e) {
        alert(e);
      }
  };

  // hide blockly and show the code
  function hide_blockly() {
      document.getElementById("blocklyDiv").style.display = 'none';
      document.getElementById("blocklyArea").style.display = 'none';
      // onresize();
      window.dispatchEvent(new Event('resize'));

      // show the code
      Blockly.Python.addReservedWords('code');
      var code = Blockly.Python.workspaceToCode(workspace);
      // // the old way of placing the code, this required a textarea
      // document.getElementById("editor").innerHTML = code;

      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.getSession().setMode("ace/mode/python");
      editor.getSession().setUseWrapMode(true);
      editor.setShowPrintMargin(false);
      editor.setValue(code);
  };

  function show_blockly() {
      document.getElementById("blocklyDiv").style.display = 'block';
      document.getElementById("blocklyArea").style.display = 'block';
      window.location.reload(true);
      // alert("resizing");
      // window.dispatchEvent(new Event('resize'));
  };
</script>

<script type="text/javascript">

  // restore at the beginning.
  // This is launched after the page has finished loading
  function restorelocal(){
    var xml_text = localStorage.getItem("blocks_cache");
    try {
      var xml = Blockly.Xml.textToDom(xml_text);
      Blockly.Xml.domToWorkspace(workspace, xml);

      automate_localstorage();
    }
    catch(err) {
        // alert(err);
        console.log(err);
        // console.log("This is generally because there's no tree information");
        automate_localstorage();
    }

    // Launch websockets
    ExecutionLogicModule.launch_websockets();

    // Recursively store everything after x miliseconds
    // automate_localstorage();
  }

  function automate_localstorage(){
      localstorage();
      setTimeout(automate_localstorage, 1000);
  }

  // Save stuff on local storage
  function localstorage() {
    var xml = Blockly.Xml.workspaceToDom(workspace);
    var xml_text = Blockly.Xml.domToText(xml);
    localStorage.setItem("blocks_cache", xml_text);
    // console.log("Saved: "+xml_text);
    // console.log("-------------");
    var xml_text_stored = localStorage.getItem("blocks_cache");
    // console.log("Rtved: "+xml_text_stored)
    // alert("Saved: "+xml_text);
  }

</script>

</body>

</html>
